


import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { Form, Spin, message } from 'antd'
import { getUseInfoList } from '../../Statistics/VehicleUsageStats/service'
import SearchForm from '../../../components/SearchForm'
import { ExportToExcel } from '../../../utils/export'
import { getViolationList } from './service'


export default function VehicleViolationRecord() {
  const [form] = Form.useForm();

  const [repairInfo, setRepairInfo] = React.useState<any[]>([])
  const [filterData, setFilterData] = React.useState<any[]|null>(null)
  const [loading, setLoading] = React.useState(false)


  const columns=[
    {
      title: '违章编号',
      dataIndex: 'violation_id',

    },
    {
      title: '车牌号',
      dataIndex: 'vehicle_id',
      search:true,
    },
    {
      title: '申请人',
      dataIndex: 'driver_id',
      ellipsis: true
      
    },
    {
      title:"违章日期",
      dataIndex:"violation_date",
      ellipsis: true
    },
    {
      title:"违章类型",
      dataIndex:"violation_type",
      ellipsis: true
    },
    {
      title: '扣分',
      dataIndex: 'violation_deduct',
      ellipsis: true
    },
    {
      title:"罚款",
      dataIndex:"violation_amount",
      ellipsis: true
    }
    
   
  ]

  const queryList = async () => {
    setLoading(true)
    await getViolationList().then(res => {
      setRepairInfo(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
    <div className="page-title-container">
      <div className="page-title">车辆违章记录</div>
    </div>
    <div className="page-content">
      {/* <VTable></VTable> */}
      {/* <VCard type="card"></VCard> */}
      <Spin spinning={loading}>
        <SearchForm
          form={form}
          exportToExcel={()=>{
            ExportToExcel('/api/violation/export','违章记录.xlsx')
          }
            
           }
          params={[
            { type: 'date', name: 'date', label: '时间' }
          ]}
          onFinsh={()=>{
            const values = form.getFieldsValue();
            const params:{start_time?:string,end_time?:string} = {};
            if(values.date){
              params.start_time = values.date[0].format('YYYY-MM-DD');
             params.end_time = values.date[1].format('YYYY-MM-DD');
              const filteredData = repairInfo.filter(item => {
                const startDate = params.start_time as string;
                const endDate =  params.end_time as string;
                const violation_date = item.repair_date
                return violation_date >= startDate && violation_date <= endDate;
            });
            setFilterData(filteredData);
            }
            else{
              setFilterData(null);
            }
            console.log(values,params);
            // await ...
            
          }}
        />
        <div className="VCard-list">

        <VCard title={'车辆违章信息'} type={'table'} columns={columns} dataSource={filterData||repairInfo}></VCard>
        </div>

      </Spin>
    </div>
  </div>
  )
}
